<template>
    <div id="change-p-num">
        <div id="information" class="align-center">
            <div class="top-title flex-center s-18 ">修改手机号
                <div class="close" @click="$emit('update:dialog','0')">
                    <img src="../../../../assets/img/login/close.png" alt="">
                </div>
            </div>
            <div class="align-center" style="flex:1">
                <el-form :model="changeForm" :rules="rules" ref="changeForm" hide-required-asterisk label-width="90px">
                    <el-form-item prop="mobile" label="新手机号">
                        <div :class="['code-container',{'error':isErrorp}]">
                            <el-input v-arouse placeholder="输入手机号" v-model.trim="changeForm.mobile" @input="()=>changeForm.mobile = changeForm.mobile.replace(/[^0-9]/g,'')"></el-input>
                            <div class="mobile-code tips" @click="getCode" v-if="!codeShow">获取验证码</div>
                            <div class="code-second" v-if="codeShow">{{codeSecond}}秒</div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="msgCode" label="验证码">
                        <div :class="{'error':isErrorc}">
                            <el-input v-arouse v-model.trim="changeForm.msgCode" placeholder="请输入验证码" style="margin-left:20px">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-form>
                <button class="dis-button  complete-btn" type="button"  :class="!disabled?'use-btn':''" :disabled="disabled"
                    @click="submit">更换</button>
            </div>
        </div>
    </div>
</template>

<script>
import User from '@/content/api/user'
import { SqlLibUser } from '../../../../../../../static/lib/sqlite/service/SqlLibUser'
import { SqlLib } from '../../../../../../../static/lib/sqlite/SqlLib'
export default {
    inject: ['getuser'],
	props:['mobileNum'],
    data () {
        let mobile = (rule, value, callback) => {
            let rex = new RegExp(/^1\d{10}$/g)
            if (rex.test(value)) {
                this.isErrorp = false
                return callback()
            } else{
                this.isErrorp = true
                return callback(new Error('手机号输入错误'))
            }
        }
        let msgCode = (rule, value, callback) => {
            if (value) {
                this.isErrorc = false
                return callback()
            } else {
                this.isErrorc = true
                return callback(new Error('请输入验证码'))
            }
        }
        return {
            codeShow: false,
            isErrorp: false,
            isErrorc: false,
            codeSecond: 60,
            changeForm: {
                mobile: '',
                msgCode: ''
            },
            rules: {
                mobile: [{ validator: mobile, trigger: 'blur' }],
                msgCode: [{ validator: msgCode, trigger: 'blur' }]
            }
        }
    },
    computed: {
        disabled () {
            return !this.changeForm.mobile || !this.changeForm.msgCode
        }
    },
    methods: {
        submit () {
            this.$refs.changeForm.validate(async v => {
                if (v) {
                    let data = {
                        mobile: this.changeForm.mobile,
                        msgCode: this.changeForm.msgCode
                    }
                    let res = await User.updateUser(data)
                    if (res.code === '0') {
                        let sqlib = SqlLib.getInstance(window.$DBDIR)
                        let user = SqlLibUser.queryCurrentUser(sqlib)
                        user.mobile = this.changeForm.mobile
                        sqlib.updateObjectById(user)
                        this.$emit('getuserInitial')
                        this.getuser()
                        this.$emit('update:dialog', '0')
                        this.$message.success('更换成功')
                    }else{
                        this.$message.error(res.message)
                    }
                }
            })
        },
        async getCode () {
            if (!this.changeForm.mobile) {
                this.$message.error('请输入手机号')
                return
            }
            let rex = new RegExp(/^1\d{10}$/g)
            if (!rex.test(this.changeForm.mobile)) {
                this.$message.error('请输入正确的手机号')
                return
            }
			if(this.changeForm.mobile === this.mobileNum){
				this.$message.error('与原手机号相同，请使用新的手机号')
				return
			}
            let res = await User.pushShortMessage({ mobile: this.changeForm.mobile })
            if (res.code === '0') {
                this.codeShow = true
                this.$message.success('发送成功')
                let time = setInterval(() => {
                    this.codeSecond--
                    if (this.codeSecond === 0) {
                        this.codeSecond = 60
                        this.codeShow = false
                        clearInterval(time)
                    }
                }, 1000)
            } else {
                this.$message.error(res.message)
            }
        },
        focus () {
            this.isError = false
            this.$refs.changeForm.clearValidate()
        },
    }
}
</script>

<style lang="scss">
#change-p-num {
    #information {
        width: 600px;
        height: 320px;
        padding-bottom: 0;
        .el-input {
            margin: 0;
        }
        .el-input,
        .el-input__inner {
            width: 340px;
        }
        .close{
            img{
                cursor: pointer;
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }
        }
    }
    .code-container {
        position: relative;
    }
    .mobile-code {
        margin-right: 0;
        position: absolute;
        right: 19px;
        top: 0;
    }
    .code-second {
        position: absolute;
        right: 19px;
        top: 0;
        font-size: 16px;
        font-weight: 400;
        height: 17px;
        color: rgba(96, 98, 102, 1);
        line-height: 40px;
    }
}
</style>